<template>
	<view class="main animated fadeIn faster">
		
		<TitleBarVue :title="title"/>
		
		<view class="gifts">
			<view :class="['received', params.fromType == 1? 'current' : '']" @click="changType(1)">送出的礼物</view>
			<view :class="['sendOut', params.fromType == 2? 'current' : '']" @click="changType(2)">收到的礼物</view>
		</view>
		
		<view class="giftList" v-if="params.fromType == 1">
			<!-- <view class="d-flex d-flex-between mt-3">
				<view class="d-flex-column d-flex-middle" style="width: 38%;">
					<view class="px-2 py-1 rounded30 d-flex-btn" style="background: #fca6df; display: inline-block;">
						<text class="px-2" style="">星座成就</text>
					</view>
					<image class="pt-3 pb-2" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 200rpx;"></image>
					<text class="font30" style="color: #878787;">未点亮</text>
				</view>
				<view class="d-flex-column d-flex-middle" style="width: 62%;">
					<view class="px-2 py-1 rounded30 d-flex-btn" style="background: #ddd1fe; display: inline-block;">
						<text class="px-2" style="">星座礼物</text>
					</view>
					<view class="d-flex d-flex-between d-flex-middle" style="flex: 1;">
						<view class="d-flex-column d-flex-middle mr-3">
							<image class="pt-5 pb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 130rpx;"></image>
							<text class="font30">礼物</text>
							<text class="font30 mt-2" style="color: #878787;">未获得</text>
						</view>
						<view class="d-flex-column d-flex-middle ml-4">
							<image class="pt-5 pb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level3.png" mode="heightFix" style="height: 130rpx;"></image>
							<text class="font30">礼物</text>
							<text class="font30 mt-2" style="color: #878787;">未获得</text>
						</view>
					</view>
				</view> 
			</view> -->
			<view class="Menulist">
				<view :class="['lately', 'font30', params.type == 1? 'current' : '']" @click="changeIsAll(1)">近90天</view>
				<view :class="['all', 'font30', params.type == 0? 'current' : '']" @click="changeIsAll(0)">全部</view>
			</view>
			<view class="item" v-if="params.type == 0 && Menulist.length != 0" v-for="i in Menulist" :key="i.id">
				<image :src="i.icon"></image>
				<view class="giftName mt-1">{{i.name}}</view>
				<view class="quantity">×{{i.count}}</view>
			</view>
			<view v-if="Menulist.length == 0" style="width: 100%;"  >
				<text class="position-relative d-flex font-bold font30" style="justify-content: center;align-items: center;top: 405rpx;">您暂时还没有送出礼物</text>
				<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
			<view class="item" v-if="params.type == 1 && Menulist.length != 0" v-for="i in Menulist" :key="i.id">
				<image :src="i.icon"></image>
				<view class="giftName mt-1">{{i.name}}</view>
				<view class="quantity">×{{i.count}}</view>
			</view>
			
		</view>
		
		<view class="giftList" v-if="params.fromType == 2">
			<view class="Menulist">
				<view :class="['lately', 'font30', params.type == 1? 'current' : '']" @click="changeIsAll(1)">近90天</view>
				<view :class="['all', 'font30', params.type == 0? 'current' : '']" @click="changeIsAll(0)">全部</view>
			</view>
			<view class="item" v-if="params.type == 0 && Menulist.length != 0" v-for="i in Menulist" :key="i.id">
				<image :src="i.icon"></image>
				<view class="giftName mt-1">{{i.name}}</view>
				<view class="quantity">×{{i.count}}</view>
			</view>
			<view class="item"  v-for="i in Menulist" :key="i.id" v-if="params.type == 1 && Menulist.length != 0">
				<image :src="i.icon"></image>
				<view class="giftName mt-1">{{i.name}}</view>
				<view class="quantity">×{{i.count}}</view>
			</view>
			<view v-if="Menulist.length == 0" style="width: 100%;"  >
				<text class="position-relative d-flex font-bold font30" style="  justify-content: center;align-items: center;top: 405rpx;">您暂时还没有收到礼物</text>
				<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import store from '@/store/index.js';
	import {giftApi} from '@/http/giftApi.js'
	export default {
		data() {
			return {
				title:"我的礼物",
				params: {
					fromType: 1, // 送出/接收 礼物
					type: 1, // 90天 / 全部
					pageIndex: 1,
					pageSize: 20,
					isLastPage: false // 是否是最后一页
				},
				Menulist: []
			}
		},
		components: {
			TitleBarVue
		},
		methods: {
			changType(type){
				this.params.fromType = type
				this.params.pageIndex = 1
				this.getGiftData()
			},
			changeIsAll(type) {
				this.params.type = type
				this.params.pageIndex = 1
				this.getGiftData()
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getGiftData() {
				let res = await giftApi.getGift(this.params)
				this.Menulist = res.records
			},
			async AddGiftData() {
				let res = await giftApi.getGift(this.params)
				this.Menulist = this.Menulist.concat(res.records)
				if(res.records.length < res.size) {
					this.isLastPage = true
				}
			}
		},
		mounted() {
			this.getGiftData()
		},
		onReachBottom() {
			if(this.params.pageIndex == 1) {
				this.isLastPage = false
			}
			if(!this.isLastPage){
				this.params.pageIndex++
				this.AddGiftData()
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.gifts {
		width: 100%;
		margin-top: 180rpx;
		padding: 20rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9B9B9B;
		font-size: 28rpx;
		align-content: flex-start;
		.received,.sendOut {
			padding: 10rpx 30rpx;
			border-radius: 20px;
			margin-right: 20rpx;
		}
		.current {
			background: linear-gradient(to right, #EC69CF, #60AFFE);
			margin-left: 20rpx;
			color: #fff;
		}
	}
	.Menulist {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #413736;
		margin: 20rpx 0 20rpx;
		.lately, .all {
			border-radius: 20px;
			padding: 12rpx 30rpx;
			font-size: 24rpx;
		}
		.current {
			background-color: #1ac2ff;
			color: #fff;
		}
	}
	.giftList {
		width: 700rpx;
		margin: 0 auto 30rpx;
		padding-bottom: 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		.item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 40rpx;
			font-size: 22rpx;
			image {
				width: 80px;
				height: 80px;
				border-radius: 3rpx;
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	height: 80rpx;
	border-bottom: 1px solid rgba(204, 204, 204, .2);
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: normal;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
